<template>
  <div class="dataCount">
    <area-of-work ref="workArea" @selected="workAreaSelectedHandler"/>
    <div style="flex: 1;overflow: auto">
      <el-card>
        <div slot="header" style="display: flex;align-items: center;justify-content: space-between">
          <n-tab :options="[{label:'调查进度'},{label:'分类统计'}]" @click="itemClick"/>
          <el-button plain type="primary" size="small" @click="exportHandler">导出</el-button>
        </div>
        <data-progress v-if="activeIndex===0" ref="dataProgress" :row="row"/>
        <data-class v-if="activeIndex===1" ref="dataClass" :row="row"/>
      </el-card>
    </div>
  </div>
</template>

<script lang="ts">
import {Component, Vue} from 'vue-property-decorator';
import AreaTree from "@/views/dataShow/components/AreaTree.vue";
import NTab from "@/components/NTab.vue";
import AreaOfWork from "@/components/AreaOfWork.vue";
import DataProgress from "@/views/dataShow/components/DataProgress.vue";
import DataClass from "@/views/dataShow/components/DataClass.vue";
import {categoryStatisticExport, progressStatisticExport} from "@/api/investDataCommon";
@Component({
  components: {
    AreaTree,
    NTab,
    DataProgress,
    DataClass,
    AreaOfWork
  }
})
export default class dataCount extends Vue {
  activeIndex:any = 0;
  row:any = {};
  $refs!: {
    dataProgress: HTMLFormElement,
    dataClass: HTMLFormElement
  };
  itemClick(item){
    this.activeIndex = item.index
    this.workAreaSelectedHandler(this.row)
  }
  workAreaSelectedHandler(val:any){
    if(!val.workId){
      return;
    }
    this.row = val
    this.$nextTick(()=>{
      if(this.activeIndex === 0){
        this.$refs.dataProgress.refresh();
      }else{
        this.$refs.dataClass.refresh();
      }
    })
  }
  exportHandler(){
    if(!this.row.workId){
      this.$message('请选择调查任务，然后再选择区划');
      return;
    }
    this.$confirm('确定要导出当前查询的统计数据吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'info'
    }).then(() => {
      if(this.activeIndex === 0){
        return progressStatisticExport(this.row);
      }else{
        return categoryStatisticExport(this.row);
      }
    }).then((response: any) => {
      if (response && response.data) {
        (this as any).$download(response.data.fileName);
      }
    }).catch((e) => {
      console.error(e);
    });

  }
}
</script>
<style lang="scss" scoped>
.dataCount{
  display: flex;
  gap: 10px;
  min-height: 100vh;
}
</style>
